<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>思多客</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/public/css/m/public.css">
    <link rel="stylesheet" href="/public/css/m/reward.css">
</head>

<body>
    <div class="n-page">
        <div id="header"></div>
        <div class="content">
            <div id="nav"></div>
            <div class="reward-form-box">
                <input type="text" placeholder="悬赏标题" class="form-input1" id="J_reward_title">
                <h3 class="pay-type-title">悬赏类别</h3>
                <div class="reward-type-box flex">
                    <div class="flex-1 reward-box tab-box-active" data-money="38" data-type="A">个股诊断</div>
                    <div class="flex-1 reward-box" data-money="188" data-type="B">解套策略</div>
                    <div class="flex-1 reward-box" data-money="388" data-type="C">季度策略</div>
                    <div class="flex-1 reward-box" data-money="688" data-type="D">年度策略</div>
                </div>
                <div class="reward-detail-box">
                    <textarea class="reward-detail-dec" placeholder="悬赏背景、点位、仓位等详细信息" id="J_reward_content"></textarea>
                </div>
                <div class="pay-money-box clearfix">
                    <p class="fl">
                        <span class="money-pay">支付金额：</span>
                        <span class="money-total-num" id="J_reward_money">38</span>
                    </p>
                    <a href="javascript:;" class="push-btn" id="publishReward">发布</a>
                </div>
            </div>
            <h3 class="all-reward-title">我的悬赏</h3>
            <div class="all-reward-box-ul" id="J_myReward_contain">
                <ul id="J_myReward"></ul>
                <div class="click-load" id="J_my_load" data-type="my">加载更多</div>
            </div>
            <h3 class="all-reward-title">最新悬赏</h3>
            <div class="all-reward-box-ul" id="J_allReward_contain">
                <ul id="J_allReward"></ul>
                <div class="click-load" id="J_all_load" data-type="all">加载更多</div>
            </div>
        </div>
        <div id="footer"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/public/js/m/fontResize.js"></script>
    <script src="/public/lib/layer/layui.js"></script>
    <script src="/public/js/G.js"></script>
    <script src="/public/js/user.js"></script>
    <script src="/public/js/reward.js"></script>
    <script src="/public/js/rechargeApi.js"></script>
    <script src="/public/js/rechargeOrder.js"></script>
    <script src="/public/js/m/public.js"></script>
    <script id="J_reward_tpl" type="text/html">
        {{# d.list.forEach(function(val,index){ }}
        <li class="reward-list" data-id="{{val.rewardId}}" data-user="{{val.userId}}">
            <div class="list-title clearfix">
                <h4 class="list-big-title fl">{{val.title}}</h4>
                <div class="right-small-txt fr">
                    <p class="reward-time">{{new Date(val.createTime).format('MM-DD HH:ii')}}<br>{{formatRewardType(val.type)}}</p>
                </div>
            </div>
            <div class="list-user-msg clearfix">
                <img src="/{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.userId}}.png" alt="" class="reward-header">
                <span class="reward-username">{{val.createUser.username}}</span>
            </div>
            <p class="dec-box none-border">{{val.content}}</p>
            <div class="look-box">
                <div class="look-all-dec inline-block">{{val.finish == false ? '未完成' : '已完成'}}</div>
                <span class="reward-reports inline-block">{{val.commentsNumber}}条评论</span>
            </div>
        </li>
        {{# }); }}
    </script>
    <script>
    layui.use('laytpl', function() {
        var laytpl = layui.laytpl;

        //悬赏参数
        var rewardParams = {
            myCount: 0,
            allCount: 0,
            timer: null,
            isPaying: false,
            my: {
                orderRule: 'TIME',
                order: 'DESC',
                pageSize: 5,
                pageId: 1
            },
            all: {
                orderRule: 'TIME',
                order: 'DESC',
                pageSize: 5,
                pageId: 1
            }
        }

        //悬赏对象
        var rewardObject = {
            type: '',
            title: '',
            content: ''
        }

        //我的悬赏
        function renderMyRewardList(params) {
            loading.open()
            reward.getMyReward(params, function(data) {
                rewardParams.myCount = data.count;
                if (data.count === 0) {
                    showNoContentImage()
                }
                if (rewardParams.my.pageId == (Math.ceil(rewardParams.myCount / rewardParams.my.pageSize))) {
                    $('#J_myReward_contain .click-load').hide();
                }
                laytpl($('#J_reward_tpl').html()).render(data, function(html) {
                    $('#J_myReward').append(html)
                })
                lazyload()
                loading.close()
            }, function(err) {
                loading.close()
                console.error(err)
                showNoContentImage()
            })
        }
        //所有悬赏
        function renderAllRewardList(params) {
            loading.open()
            reward.getList(params, function(data) {
                console.log(data)
                rewardParams.allCount = data.count;
                if (rewardParams.all.pageId == (Math.ceil(rewardParams.allCount / rewardParams.all.pageSize))) {
                    $('#J_allReward_contain .click-load').hide();
                }
                if (data.count === 0) {
                    showNoContentImage()
                }
                laytpl($('#J_reward_tpl').html()).render(data, function(html) {
                    $('#J_allReward').append(html)
                })
                lazyload()
                loading.close()
            }, function(err) {
                loading.close()
                console.error(err)
                showNoContentImage()
            })
        }

        renderMyRewardList(rewardParams.my)
        renderAllRewardList(rewardParams.all)

        //加载更多
        $('.click-load').click(function() {
            var id = $(this).attr('id');
            var type = $(this).data('type');
            if (type === 'my') {
                rewardParams.my.pageId++;
                renderMyRewardList(rewardParams.my)
            } else {
                rewardParams.all.pageId++;
                renderAllRewardList(rewardParams.all)
            }
        })
    });


    //悬赏类型选择
    $('.reward-box').click(function() {
        var hasClass = $(this).hasClass('tab-box-active')
        var money = $(this).data('money')
        if (!hasClass) {
            $(this).siblings('.tab-box-active').removeClass('tab-box-active')
            $(this).addClass('tab-box-active')
            $('#J_reward_money').html(money)
        }
    })

    //发布
    $('#publishReward').click(function() {
        var title = $('#J_reward_title').val()
        var content = $('#J_reward_content').val()
        var type = $('.tab-box-active').data('type')
        var money = $('.tab-box-active').data('money')
        if (!title || !content) {
            return;
        }
        console.log(title,content,type,money)
        location.href = '/m/payment.html?money=' + money + '&type=reward&rewardType='+type+'&title=' + title + '&content=' + content
    })
    //无内容
    function showNoContentImage() {
        $('#J_myReward_contain').html('<img style="width:3.13rem;" src="/public/images/m/no_content.png" alt="暂无内容">').addClass('center')
    }

    //格式化悬赏类型
    function formatRewardType(type) {
        switch (type) {
            case 'A':
                return '个股诊断';
            case 'B':
                return '解套策略';
            case 'C':
                return '季度策略';
            case 'D':
                return '年度策略';
        }
    }
    $(document).on('click','.reward-list',function(){
        var localUserId = G.getCookie('sdk_user_id');
        var userId = $(this).data('user');
        var rewardId = $(this).data('id');
        if(!localUserId){
            location.href = '/m/login.html?from=reward';
            return;
        }
        if(localUserId != userId){
            alert('无法查看他人的悬赏')
            return;
        }
        G.setCookie('localUserId', localUserId, 60 * 24)
        location.href = '/m/reward-detail.html?rewardId=' + rewardId + '&localUserId=' + localUserId
    })
    </script>
</body>

</html>